<template>
	<div class="content">
		<p style="height: 108rpx;"></p>
		<div class="tx">
			<img :src="updataData.avatar?updataData.avatar:'/static/mr_tx.png'" alt="">
		</div>
		<button class="eidtTx" open-type="chooseAvatar" @chooseavatar="chooseAvatar">更换头像</button>
		<div class="list_box">
			<div class="list">
				<p class="title">昵称</p>
				<p class="text"><input v-model="updataData.nickname" type="text" style="text-align: right;"></p>
			</div>
			<div class="list">
				<p class="title">手机号码</p>
				<p class="text"><input v-model="updataData.mobile" type="text" style="text-align: right;"></p>
			</div>
			<!-- <div class="list">
				<p class="title">微信号</p>
				<p class="text"><input type="text" style="text-align: right;"></p>
			</div> -->
		</div>
		<u-button 
			:disabled="isDisable"
			loadingMode="circle"
			:loading="isDisable"
			loadingText="保存中..."
			type="primary" 
			text="保存"
			@click="submit"
		>
		</u-button>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import api from '@/api';
	import { Debounce } from '@/utils/utils.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				isDisable:false,// 提交
				updataData:{
					avatar:'',
					nickname:'',
					mobile:''
				}
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token
			})
		},
		methods: {

			// 提交
			submit:Debounce(async function () {
				console.log(this.updataData)
				this.isDisable = true
				uni.showLoading({title: '保存中...'})
				api.user.update_user(this.updataData).then(res=>{
					if(res.code == 200){
						uni.hideLoading()
						this.$toast('保存成功～')
						this.isDisable = false
					}else{
						uni.hideLoading()
						this.$toast(res.msg)
						this.isDisable = false
					}
				})
			},300),

			chooseAvatar(event) {
				uni.showLoading({title: '上传中...'})
				uni.uploadFile({
					url: `${Config.apiUpload}`,
					name: 'file',
					method: 'POST',
					filePath: event.detail.avatarUrl,
					header: {
						'Authorization': `Bearer ${this.token}`,
					},
					formData: {
						file: event.detail.avatarUrl,
					},
					success: (res) => {
						let returnData = JSON.parse(res.data)
						console.log(returnData)
						this.updataData.avatar = returnData.data
						uni.hideLoading()
						this.$toast('上传成功！')
					},
					fail: (err) => {
						uni.hideLoading()
						this.$toast('上传失败，请重新上传！')
					}
				})
			},

			getUserInfo(){
				api.user.sell_user({userId:this.userId}).then(res=>{
					if(res.code == 200){
						this.updataData.mobile = res.data.mobile
						this.updataData.avatar = res.data.avatar
						this.updataData.nickname = res.data.nickname
					}
				})
			},
		},
		onLoad(options) {
			this.getUserInfo()
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.tx{
			width: 176rpx;
			height: 176rpx;
			border-radius: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			margin:0 auto;
			img{
				width: 160rpx;
				height: 160rpx;
				border-radius: 100rpx;
			}
		}
		.eidtTx{
			text-align: center;
			color: #999999;
			font-size: 26rpx;
			margin:20rpx 0 56rpx 0;
			background: none;
			&::after{
				border:none;
			}
		}
		.list_box{
			margin:0 30rpx;
			.list{
				height: 48px;
				border-radius: 4px;
				background: #FFFFFF;
				margin-bottom:40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:0 26rpx;
				font-size:28rpx;
				color:#333;
				font-weight: 500;
				.text{
					font-weight: 400;
				}
			}
		}
		/deep/ .u-button{
			width: 92%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 100rpx;
			background: #23AC39;
			font-size: 32rpx;
			text-align: center;
			font-weight: 500;
			color:#fff;
			border:none;
			margin:108rpx auto 0 auto;
		}
	}
</style>
